<template>

  <div class="background-container">
    <div class="bg-image"></div>
    <div class="card">
     <!-- 修改顶部导航 -->
     <van-nav-bar title="酒店预订">
        <template #left>
          <span class="city" @click="showAreaPicker = true">
            {{ displayArea }}<van-icon name="arrow-down" />
          </span>
        </template>
        <template #right>
          <span class="nearby">附近</span>
        </template>
      </van-nav-bar>

      <!-- 新增省市区选择弹窗 -->
      <van-popup 
        v-model:show="showAreaPicker" 
        position="bottom" 
        round
        :style="{ height: '40%' }"
      >
        <van-area 
          title="选择地区" 
          :area-list="areaList" 
          @confirm="onAreaConfirm" 
          @cancel="showAreaPicker = false"
        />
      </van-popup>

      <div class="date-picker">
        <!-- 日期选择容器 -->
        <van-cell-group inset>
            <div class="date-container" @click="showCalendar = true">
                <!-- 入住日期 -->
                <van-cell title="入住" class="date-item" :title-style="{ color: '#969799', flex: 'none' }">
                    <template #value>
                        <div class="date-content">
                            <div class="week">{{ checkInWeek }}</div>
                            <div class="date">{{ checkInDateStr }}</div>
                        </div>
                    </template>
                </van-cell>

                <!-- 分割线 -->
                <div class="divider"></div>

                <!-- 离店日期 -->
                <van-cell title="离店" class="date-item" :title-style="{ color: '#969799', flex: 'none' }">
                    <template #value>
                        <div class="date-content">
                            <div class="week">{{ checkOutWeek }}</div>
                            <div class="date">{{ checkOutDateStr }}</div>
                        </div>
                    </template>
                </van-cell>
            </div>
        </van-cell-group>

        <!-- 日期选择器 -->
        <van-calendar v-model:show="showCalendar" type="range" :min-date="minDate" :max-date="maxDate"
            @confirm="onConfirmDate" />

        <!-- 住宿时长 -->
        <van-divider class="duration">共{{ duration }}晚</van-divider>
    </div>



      <!-- 预订按钮 -->
      <van-button type="primary" class="book-btn" @click="handleBooking">
        酒店预订
      </van-button>
      <div class="tip"><span style="color: #ff9900;" class="flex-center-container">官方渠道预订享低价保证</span></div>
    </div>
  </div>
  <!-- 日期选择器 -->

  <van-popup v-model:show="showDatePicker" position="bottom"> 
  <van-date-picker v-model="currentDate" title="选择日期"  />
  </van-popup>

  <van-tabbar>
    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item icon="search">标签</van-tabbar-item>
    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>

  </van-tabbar> 
</template>

<script setup>
import { ref, reactive,computed} from 'vue';
import { NavBar, Cell, Field, DatePicker, Popup, Button, Icon } from 'vant';
import router from '@/router';
import moment from 'moment';
import {  Divider, Tag } from 'vant';
import { Calendar } from 'vant';
import {getroomtype}from '@/api/Index'
import { Area } from 'vant';
import { areaList } from '@vant/area-data'; // 引入官方地区数据

// 修改城市相关逻辑
const showAreaPicker = ref(false);
const selectedArea = ref({
  province: '四川省',
  city: '成都市',
  county: ''
});

// 计算显示的地区信息
const displayArea = computed(() => {
  const { province, city, county } = selectedArea.value;


  // 处理直辖市显示（如北京市朝阳区）
  if (province.endsWith('市') && city.endsWith('区')) {
    return `${province}·${county || city}`;
  }
  
  // 常规显示逻辑
  return county ? `${province}·${city}·${county}` : `${province}·${city}`;
});

// 地区确认回调
const onAreaConfirm = (values) => {
  selectedArea.value = {
    province: values[0]?.name,
    city: values[1]?.name,
    county: values[2]?.name
  };
  showAreaPicker.value = false;
};
const keyword = ref('');
const showDatePicker = ref(false);

const minDate = new Date(2024, 2, 1); // 可选最小日期（注意月份从0开始）
const maxDate = new Date(2025, 11, 31); // 可选最大日期

// 响应式数据
const showCalendar = ref(false);
const checkInDate = ref(new Date()); // 默认今天
const checkOutDate = ref(new Date(Date.now() + 86400000)); // 默认明天

// 日期格式化函数
const formatDate = (date) => {
    return {
        month: date.getMonth() + 1,
        day: date.getDate(),
        week: ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
    };
};

// 计算属性
const checkInDateStr = computed(() => {
    const { month, day } = formatDate(checkInDate.value);
    return `${month}月${day}日`;
});

const checkInWeek = computed(() => {
    return `周${formatDate(checkInDate.value).week}`;
});

const checkOutDateStr = computed(() => {
    const { month, day } = formatDate(checkOutDate.value);
    return `${month}月${day}日`;
});

const checkOutWeek = computed(() => {
    return `周${formatDate(checkOutDate.value).week}`;
});

// 计算住宿天数
const duration = computed(() => {
    
    const diff = checkOutDate.value - checkInDate.value;
    return Math.floor(diff / 86400000); // 1天 = 86400000毫秒

});

// 日期确认回调
const onConfirmDate = (values) => {
    const [start, end] = values;
    checkInDate.value = start;
    checkOutDate.value = end;
    showCalendar.value = false;
};

const handleBooking = () => {
  console.log()
  router.push('/RoomType')
};
</script>
<style scoped>
/* 新增城市选择样式 */
.city {
  transition: opacity 0.2s;
}
.city:active {
  opacity: 0.6;
}

/* 调整选择器样式 */
:deep(.van-picker__toolbar) {
  padding: 12px 16px;
}
:deep(.van-picker__confirm) {
  color: #1989fa;
}
:deep(.van-picker-column) {
  font-size: 14px;
}

.booking-container {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.city,
.nearby {
  font-size: 16px;
  color: #333;
}

.date-section {
  display: flex;
  margin: 20px;
  gap: 10px;
}

:deep(.van-cell__title) {
  white-space: pre-wrap;
  line-height: 1.5;
}

.search-field {
  margin-left: 20px;
  margin-right: 20px;
  width: 87%;
}

.book-btn {
  width: 80%;
  margin: 20px auto;
  margin-bottom: 1px;
  background: linear-gradient(to right, #d4af37, #c5a329);
  border: none;
  color: #333;
  display: block;
}

.tip {
  font-size: 12px;
  margin-top: 5px;
}

.card {
  position: relative;
  margin-top: 200px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  z-index: 1;
  transform: translateZ(0);
}

.background-container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/public/img/D31DBA4241A8AD1F72521B553A00548F.jpg) center/cover;
  filter: blur(2px);
  z-index: 0;
}

.flex-center-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.date-picker {
  margin: 16px;
}

.date-container {
  display: flex;
  align-items: center;
  background: #f7f8fa;
  border-radius: 8px;
}

.date-item {
  flex: 1;
  background: transparent;
}
:deep(.van-cell__value) {
  flex: 1;
  display: flex;
  justify-content: center;
}

.date-content {
  text-align: center;
}

.week {
  font-size: 12px;
  color: #323233;
}

.date {
  font-size: 14px;
  color: #1989fa;
  font-weight: 500;
  margin-top: 4px;
}

.divider {
  width: 1px;
  height: 32px;
  background: #ebedf0;
}

.duration {
  color: #969799;
  font-size: 12px;
  margin: 8px 0;
  border-color: #ebedf0;
}
.duration::before,
.duration::after {
  border-color: inherit;
}
</style>